<script type="text/javascript" src="/bootstrap_datetimepicker/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap_datetimepicker/bootstrap-datetimepicker.css">
<script type="text/javascript" src="/bootstrap_datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="/bootstrap_switch/bootstrap_switch.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap_switch/bootstrap_switch.css">
<style>
    .table>thead>tr>th{background: #ddd;}
    .table>tbody>tr>td ,.table>thead>tr>th{padding:8px;line-height:2;vertical-align:bottom;border-bottom:1px solid #ddd;}
    .col-md-12{background:#ffffff;}
    .form-inline>button{height: 40px;width: 100px;font-size: 16px;}
    .form-inline .form-group>input{border-radius:3px;}
    .modal-body .form-group>label{margin-left: 35px;float:left;margin-right: 10px;padding-top: 8px;width: 100px;}
    .modal-body .form-group>input{width: 65%;}
    .form-time {height:34px;border:1px solid #d2d6de;font-size:14px;background-color:#fff;padding:6px 12px;outline:none;}
</style>
<body>
<form class="form-inline" role="form" style="margin-top: 20px;margin-bottom: 20px;">
    <div class="form-group" style="width: 30%;">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" value="<?php if(!empty($_GET['title'])){echo $_GET['title'];}?>" placeholder="请输入名称" style="width: 300px;height: 40px;">
    </div>
    <button type="button" class="btn btn-primary" id="select" style="margin-left: 10%;">查询</button>
    <button type="button" class="btn btn-default" id="reset" style="margin-left: 20px;">重置</button>
    <button type="button" id="btn_add" status=1 class="btn btn-primary" style="margin-left: 20px;">添加任务</button>
</form>

<table class="table table-hover">
    <thead>
        <tr>
            <th>ID号</th>
            <th>任务名称</th>
            <th>任务说明</th>
            <th>任务时段</th>
            <th>任务奖励</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($result as $item)
        <tr>
            <td>{{$item->id}}</td>
            <td>{{$item->title}}</td>
            <td>{{$item->remark}}</td>
            <td>{{$item->start_time}} - {{$item->end_time}}</td>
            <td>{{$item->coin}}</td>
            <td>
                <div class="switch">
                    <input type="checkbox" target="{{$item->id}}" @if($item->status==1) checked @endif/>
                </div>
            </td>
            <td>
                <button type="button" data_id = "{{$item->id}}" class="btn btn-success btn_save">编辑</button>
                <button type="button" data_id = "{{$item->id}}" class="btn btn-danger but_delete">删除</button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
{{ $result->appends(['user_id' => Request::input("user_id")])->links() }}


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="border-radius: 10px;margin-top:30%;">
            <div class="modal-header" style="background: #3c8dbc;color: #fff;border-top-left-radius:10px;border-top-right-radius: 10px;">
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="txt_departmentname">任务名称：</label>
                    <input type="text" name="title" class="form-control" id="title"  placeholder="任务名称">
                </div>
                <div class="form-group">
                    <label for="txt_parentdepartment">任务code：</label>
                    <input type="hidden" name="id" class="form-control" id="id" placeholder="任务id">
                    <input type="text" name="code" class="form-control" disabled="disabled" id="code" placeholder="任务code">
                </div>
                {{--<div class="form-group">--}}
                    {{--<label for="txt_parentdepartment">任务要求：</label>--}}
                    {{--<input type="text" name="claim" class="form-control" id="claim" placeholder="任务code">--}}
                {{--</div>--}}
                <div class="form-group">
                    <label for="txt_parentdepartment">任务说明：</label>
                    <textarea rows="5" style="width: 65%;" id="remark" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="txt_departmentlevel">任务奖励：</label>
                    <input type="text" name="coin" class="form-control" id="coin" placeholder="任务奖励">
                </div>
                <div class="form-group" id="but-switch">
                    <label for="txt_statu">任务类型：</label>
                    <button type="button" code="SUGAR" class="btn btn-primary but-switch">达标</button>
                    <button type="button" code="SIGNIN" class="btn btn-default but-switch">签到</button>
                    <button type="button" code="HEALTH" class="btn btn-default but-switch">档案</button>
                </div>
                <div class="form-group" id="timeFrame">
                    <label for="txt_statu">任务时段：</label>
                    <input type="text" class="form-time" autocomplete="off" id="start_time" name="start_time" style="width: 20%;" placeholder="开始时间"> 至 <input type="text" autocomplete="off" id="end_time" class="form-time" name="end_time" style="width: 20%;" placeholder="结束时间">

                </div>
                <div class="form-group" id="standard">
                    <label for="txt_statu">默认达标值：</label>
                    <input type="text" name="target_value" id="target_value" class="form-control" placeholder="默认达标值">
                </div>
                <div class="form-group" id="numerical">
                    <label for="txt_statu">增幅数值：</label>
                    <input type="text" name="amplitude" id="amplitude" class="form-control" style="width: 60%;float:left;" placeholder="增幅数值"> <b style="font-size: 16px;line-height: 35px;">&nbsp;&nbsp;%</b>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_cancel" class="btn btn-default" data-dismiss="modal">取 消</button>
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"  style="margin-left: 20px;">确 定</button>
            </div>
        </div>
    </div>
</div>

</body>


<script>
    $('.switch input').bootstrapSwitch({
        "onColor" : "success",
        "offColor" : "danger",
        "onText" : "启用",
        "offText" : "禁用",
        "size" : "small",
        onSwitchChange:function(event,state){
            if(state==true){
                change_status($(this).attr('target'),1)
            }else{
                change_status($(this).attr('target'),0)
            }
        }
    });

    function change_status(task_id,status) {
        var index = layer.load();
        //status = status==true?1:0;
        $.ajax({
            url:"{{admin_url('task/delete_task')}}",
            type: "post",
            data:{
                id:task_id,
                status:status
            },
            success:function (res) {
                layer.close(index)
                if(res.code!=0) {
                    layer.msg('更新失败')
                }
            }
        })
    }

    //重置
    $('#reset').click(function () {
        $('#name').val('');
    });

    //查询按钮
    $('#select').click(function () {
        var title = $('#name').val();
        $url = "{{admin_url('task/index')}}"+"?";
        if ( title ) {
            $url += 'title='+title;
        }
        window.location.href = $url;
    });

    //添加按钮
    $("#btn_add").click(function () {
        var status = $(this).attr('status');
        if ( status != 1 ) {
            $(this).attr('status',1);
            $('#title').val('');
            $('#code').val('');
            $('#remark').val('');
            $('#coin').val('');
            $('#start_time').val('');
            $('#end_time').val('');
            $('#target_value').val('');
            $('#amplitude').val('');
        }
        //按钮跟任务code绑定
        var code = $('#btn_cancel').attr('code');
        if ( code ) {
            $('#code').val(code);
        } else {
            $('#code').val('SUGAR');
        }
        $("#myModalLabel").text("添加任务");
        $('#myModal').modal();
    });

    //修改按钮
    $(".btn_save").click(function () {
        $("#btn_add").attr('status',0);
        $("#myModalLabel").text("编辑任务");
        $('#myModal').modal();
        var id = $(this).attr('data_id');
        //Ajax获取详情
        $.ajax({
            url : "{{admin_url('task/get_task')}}",
            data:{'id':id},
            success:function(result){
                var data = result.data;
                $('#id').val(data.id);
                $('#title').val(data.title);
                $('#code').val(data.code);
                $('#remark').val(data.remark);
                $('#coin').val(data.coin);
                btn_switch(data.code,data,1);
            }
        });
    });

    //按钮切换
    $('.but-switch').click(function(){
        var butSwitch = $('.but-switch');
        for (var i=0;i<butSwitch.length;i++){
            butSwitch[i].style.cssText = "background-color:#f4f4f4;border-color:#ddd;color:#444";
        }
        //获取到id元素
        var code = $(this).attr('code');
        btn_switch(code);
        $(this).css('background-color','#3c8dbc');
        $(this).css('border-color','#367fa9');
        $(this).css('color','#fff');
    });

    //按钮切换
    function btn_switch(code,data='',status=0){
        $('#btn_cancel').attr('code',code);
        $('#code').val(code);
        switch (code){
            case 'SUGAR':
                $('#timeFrame').show();
                $('#standard').show();
                $('#numerical').show();
                if ( status == 1 ) {
                    $('#start_time').val(data.start_time);
                    $('#end_time').val(data.end_time);
                    $('#target_value').val(data.target);
                    $('#amplitude').val(data.amplitude);
                    butChange(code);
                }
                break;
            case 'SIGNIN':
                $('#timeFrame').show();
                $('#standard').hide();
                $('#numerical').hide();
                if ( status == 1 ) {
                    $('#start_time').val(data.start_time);
                    $('#end_time').val(data.end_time);
                    $('#target_value').val('');
                    $('#amplitude').val('');
                    butChange(code);
                }
                break;
            case 'HEALTH':
                $('#timeFrame').hide();
                $('#standard').hide();
                $('#numerical').hide();
                if ( status == 1 ) {
                    $('#start_time').val('');
                    $('#end_time').val('');
                    $('#target_value').val('');
                    $('#amplitude').val('');
                    butChange(code);
                }
                break;
        }
    }
    
    function butChange(code) {
        var butSwitch = $('.but-switch');
        for (var i=0;i<butSwitch.length;i++){
            var hCode = butSwitch[i].attributes['code'].value;
            if ( hCode == code ) {
                butSwitch[i].style.cssText = "background-color:#3c8dbc;border-color:#367fa9;color:#fff";
            } else {
                // butSwitch[i].style.display  = 'none';
                butSwitch[i].style.cssText = "background-color:#f4f4f4;border-color:#ddd;color:#444";
            }
        }
    }

    /**
     * 添加、修改
     */
    $('#btn_submit').click(function () {
        var status = $('#btn_add').attr('status');
        var title = $('#title').val();
        var code = $('#code').val();
        var remark = $('#remark').val();
        var coin = $('#coin').val();
        var start_time = $('#start_time').val();
        var end_time = $('#end_time').val();
        var target_value = $('#target_value').val();
        var amplitude = $('#amplitude').val();
        var data = {'title':title,'code':code,'remark':remark,'coin':coin};
        if ( code == 'SUGAR' ) {
            data['start_time'] = start_time;
            data['end_time'] = end_time;
            data['target'] = target_value;
            data['amplitude'] = amplitude;
        }else if ( code == 'SIGNIN' ) {
            data['start_time'] = start_time;
            data['end_time'] = end_time;
        }
        //1添加  0修改
        if ( status == 1 ) {
            var url = "{{admin_url('task/add_task')}}";
        } else if ( status == 0 ) {
            var url = "{{admin_url('task/update_task')}}";
            data['id'] = $('#id').val();
        }
        $.ajax({
            url : url,
            type:'post',
            dataType:'json',
            data:data,
            success:function(result){
                if ( result.code != 0 ) {
                    layer.msg('操作失败')
                }else{
                    window.location.reload();
                }
            }
        });
    });

    //初始化时间插件
    $("#start_time").datetimepicker({
        minView : "hour", //  选择时间时，最小可以选择到那层；默认是‘hour’也可用0表示
        startView:'day',
        language : 'zh-CN', // 语言
        autoclose : true, //  true:选择时间后窗口自动关闭
        format : 'hh:ii', // 文本框时间格式，设置为0,最后时间格式为2017-03-23 17:00:00
        // todayBtn : true, // 如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
        minuteStep:5,       //一分钟展示形式
    });
    $("#end_time").datetimepicker({
        minView : "hour", //  选择时间时，最小可以选择到那层；默认是‘hour’也可用0表示
        startView:'day',
        language : 'zh-CN', // 语言
        autoclose : true, //  true:选择时间后窗口自动关闭
        format : 'hh:ii', // 文本框时间格式，设置为0,最后时间格式为2017-03-23 17:00:00
        // todayBtn : true, // 如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
        minuteStep:5,       //一分钟展示形式
    })

    //删除
    $('.but_delete').on('click',function () {
        var task_id = $(this).attr('data_id');
        $.ajax({
            url : "{{admin_url('task/delete_task')}}",
            type:'post',
            dataType:'json',
            data:{'id':task_id,'status':-1},
            success:function(result){
                if ( result.code != 0 ) {
                    layer.msg('删除失败')
                }else{
                    window.location.reload();
                }
            }
        });
    })
</script>